<template>
  <view class="cp-contant">
    <view class="cp-bg">
      <view class="top-head">
        <image
          src="https://ojqn.wm2177.com/wechat_imgs/ouhun-cp/top-head2.png"
        ></image>
      </view>
      <!-- 按钮 -->
      <view class="top-btn">
        <button class="btn" open-type="share">
          <view class="invite-btn">
            <image
              src="https://ojqn.wm2177.com/wechat_imgs/ouhun-cp/invite-btn.png"
            ></image>
          </view>
          <view class="hand">
            <image
              src="https://ojqn.wm2177.com/wechat_imgs/ouhun-cp/hand.gif"
            ></image>
          </view>
        </button>
      </view>
      <!-- 二维码按钮 -->
      <image
        class="right-btn"
        @click="saveImg()"
        src="../../static/download.png"
        mode=""
      ></image>

      <!-- 第一步 -->
      <view class="invite-step">
        <image
          src="https://ojqn.wm2177.com/wechat_imgs/ouhun-cp/invite-step.png "
        ></image>
      </view>
      <!-- 第二部 -->
      <view class="fanli-step">
        <image
          src="https://ojqn.wm2177.com/wechat_imgs/ouhun-cp/fanli-step2.png"
        ></image>
      </view>
      <!-- 列表 -->
      <view class="select-list">
        <view class="item-select-list" @click="changeActive(1)">
          <image
            class="icon2"
            src="https://ojqn.wm2177.com/wechat_imgs/ouhun-cp/my-invite-select.png"
            v-if="active == 1"
            alt=""
          ></image>
          <image
            class="icon1"
            src="https://ojqn.wm2177.com/wechat_imgs/ouhun-cp/my-invite.png"
            v-else
            alt=""
          >
          </image>
        </view>
        <view class="item-select-list" @click="changeActive(2)">
          <image
            class="icon2"
            src="https://ojqn.wm2177.com/wechat_imgs/ouhun-cp/my-top-select.png"
            v-if="active == 2"
            alt=""
          ></image>
          <image
            class="icon1"
            src="https://ojqn.wm2177.com/wechat_imgs/ouhun-cp/my-top.png"
            v-else
            alt=""
          >
          </image>
        </view>
        <view class="item-select-list" @click="changeActive(3)">
          <image
            class="icon2"
            src="https://ojqn.wm2177.com/wechat_imgs/ouhun-cp/get-btn-select.png"
            v-if="active == 3"
            alt=""
          ></image>
          <image
            class="icon1"
            src="https://ojqn.wm2177.com/wechat_imgs/ouhun-cp/get-btn.png"
            v-else
            alt=""
          >
          </image>
        </view>
      </view>

      <view class="my-invite" v-if="active == 1">
        <view class="invite-list">
          <view
            class="user-information"
            v-for="item in lowerUsers"
            :key="item.id"
          >
            <view class="user-img">
              <image :src="item.himg"></image>
            </view>
            <view class="user-id">
              <view class="">{{ item.nickname }}</view>
              <view class="time">{{ parseTime(item.add_time) }}</view>
            </view>
            <view class="user-number">
              <text class="">流水：{{ item.sum_money }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="my-invite" v-else-if="active == 2">
        <view class="invite-list">
          <view class="user-information">
            <view class="user-img">
              <image :src="higherUsers.himg"></image>
            </view>
            <view class="user-id">
              <text class="">{{ higherUsers.nickname }}</text>
            </view>
            <!-- <view class="user-number">
							<text class="">13703925020</text>
						</view> -->
          </view>
        </view>
      </view>
      <view class="my-invite" v-else>
        <view class="invite-list">
          <view class="actions">
            <view
              class="item-actions"
              :class="btnActive === 1 ? 'active' : ''"
              @click="changeBtnActive(1)"
            >
              可领取
            </view>
            <view
              class="item-actions"
              :class="btnActive === 2 ? 'active' : ''"
              @click="changeBtnActive(2)"
            >
              领取记录
            </view>
          </view>
          <!-- 可领取 -->
          <view class="content-invite-list" v-if="btnActive === 1">
            <view class="user-information" v-for="item in myWin" :key="item.id">
              <view class="user-img">
                <image :src="item.himg"></image>
              </view>
              <view class="user-id">
                <view class="">{{ item.nickname }}</view>
                <view class="time">{{ parseTime(item.date) }}</view>
              </view>
              <view class="jiangli">
                <img class="icon" src="../../static/xinshi.png" alt="" />
                <text class="num">{{ item.money }}</text>
              </view>
            </view>
          </view>
          <!-- 领取记录 -->
          <view class="content-invite-list" v-else>
            <view
              class="user-information"
              v-for="item in myWinLog"
              :key="item.id"
            >
              <view class="user-img">
                <image :src="item.himg"></image>
              </view>
              <view class="user-id">
                <view class="">{{ item.nickname }}</view>
                <view class="time">{{ parseTime(item.date) }}</view>
              </view>
              <view class="jiangli">
                <img class="icon" src="../../static/xinshi.png" alt="" />
                <text class="num">{{ item.money }}</text>
              </view>
            </view>
          </view>

          <img
            v-if="btnActive === 1 && myWin.length > 0"
            class="onekey"
            @click="postLqWin"
            src="https://ojqn.wm2177.com/wechat_imgs/ouhun-cp/all-get.png"
            alt=""
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { useUsercodeStore } from '@/store/usercode.js'
  import { parseTime } from '@/utils/index.js'
  import { http } from '@/utils/http.js'
  export default {
    data() {
      return {
        active: 1,
        btnActive: 1,
        lowerUsers: [],
        higherUsers: {},
        myWin: [],
        myWinLog: [],
        imgurl: '',
      }
    },
    async mounted() {
      const { data } = await http.request({
        url: '/api/share/shareimage',
        method: 'POST',
      })
      this.imgurl = data
      console.log(data)
      this.getlowerUsers()
    },
    onShareAppMessage() {
      const userCodeStore = useUsercodeStore()
      const user = userCodeStore.usercode.user
      return {
        title: '欧魂',
        path: `/pages/home/index?pid=${user}`,
      }
    },
    methods: {
      parseTime,
      changeActive(val) {
        this.active = val
        if (val == 1) {
          this.getlowerUsers()
        } else if (val == 2) {
          this.getPInfo()
        } else {
          this.getMyWin()
          this.getMyWinLog()
        }
      },
      changeBtnActive(val) {
        this.btnActive = val
      },
      // 下级
      async getlowerUsers() {
        const { data } = await http.request({
          url: '/api/newuser/myUser',
          method: 'POST',
          data: {
            page: 1,
            limit: 999,
          },
        })
        this.lowerUsers = data || []
      },
      // 上级
      async getPInfo() {
        const { data } = await http.request({
          url: 'api/newuser/getPInfo',
          method: 'POST',
        })
        this.higherUsers = data || {}
      },
      // 我的奖励
      async getMyWin() {
        const { data } = await http.request({
          url: '/api/newuser/myWin',
          method: 'POST',
          data: {
            page: 1,
            limit: 999,
          },
        })
        this.myWin = data || []
      },
      // 领取记录
      async getMyWinLog() {
        const { data } = await http.request({
          url: '/api/newuser/myWinLog',
          method: 'POST',
          data: {
            page: 1,
            limit: 999,
          },
        })
        this.myWinLog = data || []
      },
      // 一键
      async postLqWin() {
        const { st } = await http.request({
          url: '/api/newuser/lqWin',
          method: 'POST',
        })
        if (st === 1) {
          // 成功 刷新数据
          uni.utils.toast('一键领取成功')
          this.getMyWin()
          this.getMyWinLog()
        } else {
          uni.utils.toast('一键领取失败')
        }
      },
      saveImg() {
        uni.downloadFile({
          //下载
          url: this.imgurl, //图片下载地址
          success: (res) => {
            if (res.statusCode === 200) {
              uni.saveImageToPhotosAlbum({
                //保存图片到系统相册。
                filePath: res.tempFilePath, //图片文件路径
                success: function () {
                  uni.showToast({
                    title: '图片保存成功',
                    icon: 'none',
                  })
                },
                fail: function (e) {
                  console.log(e)
                  uni.showToast({
                    title: '图片保存失败',
                    icon: 'none',
                  })
                },
              })
            }
          },
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .cp-bg {
    background-image: linear-gradient(-90deg, #ffcce7, #ecd4f7, #edf2fb);

    width: 100%;
    // min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-bottom: 80rpx;

    // background-size: cover;
    .top-head {
      width: 100%;
      height: 909rpx;
      position: relative;

      image {
        width: 750rpx;
        height: 909rpx;
      }
    }
    .right-btn {
      width: 130rpx;
      height: 130rpx;
      position: absolute;
      right: 30rpx;
      top: 600rpx;
    }
    .top-btn {
      width: 100%;
      height: 150rpx;
      display: flex;
      position: absolute;
      top: 750rpx;
      // margin-top:746rpx;

      .btn {
        background: transparent;
        padding: 0;
        border: none;

        &:after {
          border: none;
        }
      }

      .invite-btn {
        width: 414rpx;
        height: 134rpx;
        // padding-left: 150rpx;
        position: relative;

        image {
          width: 414rpx;
          height: 134rpx;
        }
      }

      .hand {
        width: 153rpx;
        height: 132rpx;
        left: 270rpx;
        position: absolute;
        top: 28rpx;

        image {
          width: 153rpx;
          height: 132rpx;
        }
      }
    }

    .invite-step {
      width: 700rpx;
      height: 410rpx;
      margin: auto;

      // padding-top: 60rpx;
      image {
        width: 697rpx;
        height: 406rpx;
      }
    }

    .fanli-step {
      width: 700rpx;
      height: 410rpx;
      margin: 10rpx auto;

      image {
        width: 697rpx;
        height: 406rpx;
      }
    }

    .select-list {
      width: 688rpx;
      background-color: #fdf4f7;
      margin: 20rpx auto;
      border-radius: 40rpx;
      display: flex;
      align-items: center;

      .item-select-list {
        text-align: center;
        flex: 1;
        // height: 100rpx;
        overflow: hidden;

        .icon1 {
          width: 60%;
          height: 37rpx;
          padding: 30rpx 0;
        }

        .icon2 {
          width: 100%;
          height: 80rpx;
        }
      }
    }

    .my-invite {
      width: 697rpx;
      min-height: 600rpx;
      margin-bottom: 70rpx;
      margin: auto;
      background-color: #fff2f3;
      border-radius: 30rpx;
      border: 4rpx solid #fffed8;

      .invite-list {
        width: 92%;
        height: 550rpx;
        // background-color: #ecd4f7;
        margin: 20rpx auto;

        .content-invite-list {
          max-height: 600rpx;
          overflow-y: auto;
        }

        .actions {
          display: flex;
          align-items: flex-start;
          margin-bottom: 20rpx;

          .item-actions {
            width: 140rpx;
            height: 50rpx;
            line-height: 50rpx;
            border: 1rpx solid #ffaa00;
            color: #ffaa00;
            text-align: center;
            font-size: 26rpx;
            border-radius: 100rpx;
            margin-right: 20rpx;

            &.active {
              color: #fff;
              background-color: #ffaa00;
            }
          }
        }

        .user-information {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 30rpx;

          .jiangli {
            margin: 0 30rpx;
            display: flex;
            align-items: center;

            .icon {
              width: 40rpx;
              height: 40rpx;
              margin-right: 6rpx;
            }

            .num {
              font-size: 26rpx;
              font-weight: 600;
              color: #ac2e2a;
            }
          }

          .status {
            font-size: 26rpx;
            font-weight: 600;
            color: #ac2e2a;
          }

          .user-img {
            width: 94rpx;
            height: 94rpx;

            // border-radius: 60rpx;
            image {
              width: 94rpx;
              height: 94rpx;
              border-radius: 60rpx;
            }
          }

          .user-id {
            flex: 1;
            font-size: 26rpx;
            font-weight: 600;
            color: #ac2e2a;
            padding-left: 30rpx;

            .time {
              font-weight: 500;
              font-size: 22rpx;
            }
          }

          .user-number {
            font-size: 26rpx;
            color: #ac2e2a;
            margin: auto;
            font-weight: 600;
            display: flex;
            align-items: center;
          }
        }
      }

      .onekey {
        display: block;
        width: 200rpx;
        height: 80rpx;
        margin: 20rpx auto 0 auto;
      }
    }
  }
</style>
